/**
 * 系统管理 地址配置管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据汇总</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索，切换 -->
    <el-row :gutter="8">
      <el-col :span="6">
        <div class="stbgc">
          <el-row :gutter="8">
             <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期" v-if="type == 'day'">
            </el-date-picker>
            <el-date-picker
              v-model="dateRange"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份" v-if="type == 'month'">
            </el-date-picker>
            <el-col :span="12">
              <el-input size="small" v-model="year1" placeholder="请输入开始年份" v-if="type == 'year'"></el-input>
            </el-col>
            <el-col :span="12">
              <el-input size="small" v-model="year2" placeholder="请输入结束年份" v-if="type == 'year'"></el-input>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="stbgc">
          <el-row>
            <el-col :span="8" class="text-c">
              <el-radio v-model="type" label="day">日</el-radio>
            </el-col>
            <el-col :span="8" class="text-c">
              <el-radio v-model="type" label="month">月</el-radio>
            </el-col>
            <el-col :span="8" class="text-c">
              <el-radio v-model="type" label="year">年</el-radio>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <el-col :span="4" class="stbgc">
       <el-row>
        <el-button size="small" type="primary" @click="search">搜索</el-button>
       </el-row>
      </el-col>
    </el-row>
    <!--列表-->
    <el-table
      size="small"
      :data="tradeData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%; margin-top: 2%"
    >
      <el-table-column
        align="center"
        prop="time"
        label="时间"
        width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="addOrderNum"
        label="新增总订单量/新增小订单量"
        width="200"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="addPayOrderNum"
        label="已支付订单/已支付订单"
        width="200"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="refundOrderGoodsNum"
        label="已退款小订单数"
        width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="income"
        label="销售额"
        min-width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="refund"
        label="退款额"
        min-width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="addSaleGoodsNum"
        label="售出货物件数"
        width="100"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="refundSaleGoodsNum"
        label="退款货物件数"
        width="100"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
// 导入请求方法
import { chartList } from "../../api/basisMG";
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      type:'day', //查看数据的时间类型
      dateTime:'',
      //汇总数据
      tradeData: [],
      // 日期
      dateRange: '',
      year1:'',
      year2:''
    };
  },
  // 注册组件
  components: {
    // Pagination,
  },

  /**
   * 数据发生改变
   */
  watch: {},

  /**
   * 创建完毕
   */
  created() {
    // let data = {
    //   pageVo: this.formInline,
    //   keys: ["ADDRESS"],
    // };
    // this.getdata(data);
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取数据方法
    async getdata(parameter) {
      // this.loading = true;
      var that = this;
      // 获取用户列表
      await chartList(parameter).then((res) => {
        if (res.code == "200") {
          // that.loading = false;
          that.tradeData = res.data;
        } else {
          // that.loading = true
          that.tradeData = [];
        }
      });
    },
    search() {
      let tradeVo;
      if (this.type != 'year') {
        tradeVo = {
          type: this.type,
          dateRange: this.dateRange
        }
      } else {
        // 先判断year1是否大于year2
      if (this.year1 > this.year2) {
        this.$message.error(`开始日期不能大于结束日期！请重新输入！`);
        this.year1 = ''
        this.year2 = ''
        return;
      }
      let dateRange = [];
      dateRange.push(new Date(this.year1, 1, 1))
      dateRange.push(new Date(this.year2, 1, 1))
      tradeVo = {
          type: this.type,
          dateRange
      }
      
    }
    this.getdata(tradeVo)
    }
  }
};
</script>

<style scoped>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}
.stsearch {
  text-align: center;
}
.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>

 